<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>伪类选择器测试</title>
   <style>
    .nth-container  div:nth-child(2){
         color:red;
      }
  
   .nth-container  div:nth-child(2n){
         color:blue;
    }
   
   .nth-container  div:first-child{
         background:red;
    }
   .nth-container  div:second-child{

         /* second无效 */
         background:yellow;
    }
   .nth-container  div:last-child{
         /* last 表示倒数 */
         background:yellow;
    }


    .of-container  p:nth-of-type(2n){
         /* 限制为 p  */
         color:yellow;
    }
    .of-container  p:nth-of-type(2n+1){
         /* 限制为 p  */
         color:skyblue;
    }
   </style>
</head>

<body>
   <div class="nth-container">
     <div>
       <p>我是被包裹的p元素</p>
     </div>

     <p>我是p元素</p>

     <div>
       <p>我是被包裹的p元素</p>
     </div>

     <div>2</div>

     <p>我是p元素</p>
     <p>我是p元素</p>

     <div>3</div>
     <div>7</div>

     <div>
      <p>我是被包裹的p元素</p>
    </div>

     <p>我是p元素</p>
     <p>我是p元素</p>

     <div>9</div>
     <div>10</div>
     <div>11</div>

     <p>我是p元素</p>
     <p>我是p元素</p>

     <div>12</div>

     <div>
      <p>我是被包裹的p元素</p>
    </div>   

   	   
   </div>

   <div class="of-container">
      <p>我是p元素</p>
      <div>
        <p>我是被包裹的p元素</p>
      </div>
      <div>2</div>
      <p>我是p元素</p>
      <p>我是p元素</p>
      <div>3</div>
      <div>7</div>
      <div>
       <p>我是被包裹的p元素</p>
     </div>
      <p>我是p元素</p>
      <p>我是p元素</p>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <p>我是p元素</p>
      <p>我是p元素</p>
      <div>12</div>
      <div>
       <p>我是被包裹的p元素</p>
     </div>   
     
    </div>
</body>
</html>